<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="考核类型" prop="checkName">
        <el-select v-model="queryParams.checkName" placeholder="请选择考核类型">
          <el-option :label="item.label" :value="item.value" v-for="(item, i) in checkNameOption" :key="i"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联对象" prop="deviceName"  :rules="[{ required: false, message: '关联对象不能为空' }]">
        <!-- <nu-select class="searchSelect" :filterable="true" :list="nameList" type="text" v-model="queryParams.deviceName"
          autocomplete="off">
        </nu-select> -->
        <nu-input type="text" v-model="queryParams.deviceName" size="middle" placeholder="请输入关联对象名称"></nu-input>
      </el-form-item>
      <el-form-item label="考核月份">
        <el-date-picker v-model="queryParams.checkDate" value-format="yyyyMM" type="month"
          placeholder="请选择考核月份" :clearable="false"></el-date-picker>
      </el-form-item>
      <el-form-item label="计算日期">
        <el-date-picker v-model="queryParams.computeDay" value-format="yyyy-MM-dd" type="date"
          placeholder="请选择计算日期" :clearable="false"></el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="checkName">
        <el-select v-model="queryParams.checkStatus" placeholder="请选择状态">
          <el-option :label="item.label" :value="item.value" v-for="(item, i) in checkStatusOption" :key="i"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <nu-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</nu-button>
        <nu-button icon="el-icon-refresh" size="mini" @click="resetQuery">清除</nu-button>
      </el-form-item>
    </el-form>

    <el-table ref="tables" v-loading="loading" :data="list" height="calc(100% - 200px)">
      <el-table-column label="考核类型" align="center" prop="checkName" :show-overflow-tooltip="true" />
      <el-table-column label="考核月份" align="center" prop="checkDate" :show-overflow-tooltip="true" />
      <el-table-column label="状态" align="center" prop="checkStatus">
        <template slot-scope="scope">
          <span>{{ scope.row.checkStatus == 0 ? '计算中' : scope.row.checkStatus == 1 ? '计算成功' : ' 计算失败' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="关联对象" align="center" prop="relatedDevName"></el-table-column>
      <el-table-column label="考核计算开始时间" align="center" prop="startTime">
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.onoffTime) }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="考核计算完成时间" align="center" prop="finishTime">
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.onoffTime) }}</span>
        </template> -->
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getChannelsOnOffLogs" />
  </div>
</template>

<script>
import nuButton from "@/components/base/button"
import nuSelect from "@/components/base/select";
import NuformItem from "@/components/verify-form/form-item.vue";
import nuInput from "@/components/base/input";
import { getDateTime } from "@/utils/ruoyi";
export default {
  name: "Logininfor",
  dicts: ['sys_common_status'],
  components: { nuButton, nuSelect, NuformItem, nuInput },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: { prop: 'loginTime', order: 'descending' },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        checkName: '',
        deviceName: '',
        checkDate: '',
        computeDay: '',
        checkStatus: ''
      },
      checkStatusOption: [{ label: '计算中', value: 0 }, { label: '计算成功', value: 1 }, { label: '计算失败', value: 2 }],
      checkNameOption: [
        { label: '发电计划考核', value: '发电计划考核' },
        { label: '母线电压考核', value: '母线电压考核' },
        { label: '调峰考核', value: '调峰考核' },
        { label: 'agc考核', value: 'agc考核' },
        { label: '月度考核费用', value: '月度考核费用' }
      ],
      nameList: []
    };
  },
  created() { },
  mounted() {
    // this.dateRange = [getDateTime("day") + " 00:00:00", getDateTime("day") + " 23:59:59"]
    this.getChannelsOnOffLogs()
    // this.getCrewManageTableDataList()
  },
  methods: {
    /**
     * 查询日志列表
     */
    getChannelsOnOffLogs() {
      this.loading = true;
      let postData = {
        ...this.queryParams
      };
      this.$httpGet(window.api.getCheckCalculateLogs, postData).then(res => {
        if (res.code == 200 && res.rows) {
          this.total = res.total;
          this.list = res.rows;
          this.loading = false;
        } else { }
      }).catch(err => {

      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getChannelsOnOffLogs();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryParams");
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;
      // this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
    },
    /**
     * 关联机组
     */
    getCrewManageTableDataList() {
      let postData = {
        pageSize: 9999,
        pageNum: 1,
        phyunitName: "",
      };
      this.$httpGet(window.api.getCrewManageTableData, postData)
        .then((res) => {
          if (res.code == 200 && res.rows) {
            res.rows.map((item) => {
              this.nameList.push({
                label: item.phyunitName,
                value: item.phyunitName,
              });
            });
          } else { }
        })
        .catch((err) => { });
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetForm('form');
      for (let k in this[formName]) {
        if (Object.prototype.toString.call(this[formName][k]) == "[object String]") {
          this[formName][k] = ''
        } else if (Object.prototype.toString.call(this[formName][k]) == "[object Array]") {
          this[formName][k] = []
        } else if (Object.prototype.toString.call(this[formName][k]) == "[object Number]") {
          this[formName][k] = ''
        }
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%
}

.searchDetail {
  color: #108EE9;
  font-size: 13px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
}

.ft-20 {
  font-size: 20px;
}
</style>

